<!--suppress CssInvalidPropertyValue -->
<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="项目名称" style="margin-top: 20px" >
            <el-input v-model="ruleForm.projectName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="测试进度" style="margin-top: 20px" >
            <el-progress :percentage="ruleForm.testSchedule" :color="customColor" stroke-width="10"></el-progress>
            <div >
              <el-button-group>
                <el-button size="mini" icon="el-icon-minus" @click="decrease" ></el-button>
                <el-button size="mini" icon="el-icon-plus" @click="increase"></el-button>
              </el-button-group>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="测试人员" >
            <el-input v-model="ruleForm.tester"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="测试时间" size="medium">
            <el-date-picker
              v-model="ruleForm.testTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="今日测试进展">
            <el-input type="textarea" v-model="ruleForm.remark" :rows="8"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="bug情况">
            <el-input type="textarea" v-model="ruleForm.testBug" :rows="4"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目变更" prop="name">
            <el-input type="textarea" v-model="ruleForm.requirementsChange"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="风险" prop="name" >
            <el-input type="textarea" v-model="ruleForm.risk"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="明日计划" >
            <el-input type="textarea" v-model="ruleForm.tomorrowPlan"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="群机器人" prop="region" style="margin-right: auto">
        <el-select v-model="ruleForm.botName" placeholder="请选择发生群机器人"  >
          <el-option v-for=" item in list" :label="item.botName" :value="item.botName"></el-option>
        </el-select>
      </el-form-item>
      <!--    <el-form-item label="是否发送通知" prop="delivery">-->
      <!--      <el-switch v-model="ruleForm.delivery"></el-switch>-->
      <!--    </el-form-item>-->
      <!--    <el-form-item label="特殊资源" prop="resource">-->
      <!--      <el-radio-group v-model="ruleForm.resource">-->
      <!--        <el-radio label="线上品牌商赞助"></el-radio>-->
      <!--        <el-radio label="线下场地免费"></el-radio>-->
      <!--      </el-radio-group>-->
      <!--    </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="addTestDaily('ruleForm')">确定</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  /* eslint-disable */
  export default {
    data() {
      return {
        customColor: '#409eff',
        list: null,
        //对应后端实体字段
        ruleForm: {
          projectName: '',
          tester: '',
          testTime: '',
          testBug: '',
          requirementsChange: '',
          risk:'',
          tomorrowPlan:'',
          botName: '',
          remark: '',
          //测试进度
          testSchedule: 10
        },
        rules: {
          projectName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20个字符', trigger: 'blur' }
          ],
          botName: [
            { required: true, message: '请选择机器人', trigger: 'change' }
          ],
          testTime: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          remark: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
        formInline: {
          botId: '',
          botName: '',
          botGroup: '',
          botWebhook: '',
          createTime: '',
          remark: ''
        }
      };
    },
    // vue生命周期钩子函数
    created() {
      this.getBotNameList()
    },
    methods: {
      getBotNameList() {
        // 因为axios内部的then内部的this是指的axios对象，而不是当前vue的对象，因此把当前Vue的对象用vm声明，这样this就不会冲突
        var vm = this
        this.axios({
          method: 'GET',
          url: 'http://localhost:8080/bot/getBotName?botName=' + vm.formInline.botName
        }).then(response => {
          // 得到一个PageInfo对象
          this.total = response.data.total// 将PageInfo中的total赋给vm的total
          this.list = response.data.list// 当前页显示的所有数据
        })
      },
      addTestDaily(ruleForm) {
        var vm = this
        this.axios({
          method: 'POST',
          url: 'http://localhost:8080/testDaily/addTestDaily',
          data: this.ruleForm
        }).then(function(resp) {
            if (resp.data == 'success') {
              // 弹框
              vm.$message({
                message: '新增成功',
                type: 'success'
              })
            } else {
              vm.$message.error('删除失败')
            }
            // 添加成功后前往邮箱列表页->index
            vm.$router.push({
              name: 'testDaily'
            })
          }
        )
      },
      resetForm(ruleForm) {
        this.$refs[ruleForm].resetFields();
      },
      increase() {
        this.ruleForm.testSchedule += 10;
        if (this.ruleForm.testSchedule > 100) {
          this.ruleForm.testSchedule = 100;
        }
      },
      decrease() {
        this.ruleForm.testSchedule -= 10;
        if (this.ruleForm.testSchedule < 0) {
          this.ruleForm.testSchedule = 0;
        }
      }
    }
  }
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>
